<template>
  <div class="goods-list">
    <nav-header></nav-header>
    <nav-bread>
      <span slot="bread">Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" :class="{'sort-up':sortFlag}" @click="_sortGoods">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show': filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" :class="{'cur': currentPrice === 'all'}">All</a></dd>
              <dd v-for="(item, index) in priceFilter" :key="index" @click="setPriceFilter(index)">
                <a href="javascript:void(0)" :class="{'cur': currentPrice === index}">{{ item.startPrice }} - {{ item.endPrice }}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item, index) in goodsList" :key="index">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/' + item.productImage" :key="'/static/'+item.productImage"></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">{{ item.salePrice }}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" class="load-more">
                <img src="../assets/loading-spinning-bubbles.svg" v-show="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <modal :mdShow="mdShow" @close="closeModal">
      <p slot="message">{{ err_msg }}</p>
      <div slot="btnGroup">
        <a href="javascript:void(0)" class="btn btn--m" @click="closeModal">关闭</a>
      </div>
    </modal>

    <modal :mdShow="mdShowCart" @close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功!</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <div class="md-overlay" v-show="overlayFlag" @click="clockPop"></div>
    <nav-footer></nav-footer>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios'
import NavHeader from '@/components/Header'
import NavFooter from '@/components/Footer'
import NavBread from '@/components/Breadcrumb'
import Modal from '@/components/Modal'

import './../assets/css/base.css'
import './../assets/css/product.css'

export default {
  data() {
    return {
      goodsList: [],
      priceFilter: [
        {
          startPrice: '0.00',
          endPrice: '500.00'
        },
        {
          startPrice: '500.00',
          endPrice: '1000.00'
        },
        {
          startPrice: '1000.00',
          endPrice: '1500.00'
        },
        {
          startPrice: '1500.00',
          endPrice: ''
        }
      ],
      busy: true,
      loading: false, // loading 动图
      currentPrice: 'all', // 当前价格区间
      filterBy: false, // 控制样式
      overlayFlag: false, // 遮罩
      sortFlag: true, // 默认升序排序
      page: 1, // 当前页
      pageSize: 8, // 条数
      mdShow: false, // 模态框开关
      mdShowCart: '',
      err_msg: '请先登录，否则无法加入购物车' // 模态框信息
    }
  },
  created() {
    this._getGoodsList()
  },
  methods: {
    _getGoodsList(flag) {
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag ? 1 : -1,
        priceLevel: this.currentPrice
      }
      this.loading = true
      axios.get('/api/goods/list', { params }).then(res => {
        this.loading = false
        if (res.data.status === 0) {
          if (flag) {
            this.goodsList = this.goodsList.concat(res.data.result.list)
            if (res.data.result.count === 0) {
              this.busy = true
            } else {
              this.busy = false
            }
          } else {
            this.goodsList = res.data.result.list
            this.busy = false
          }
        } else {
          console.log(res.data.msg)
        }
      })
    },
    _sortGoods() {
      this.page = 1
      this.sortFlag = !this.sortFlag
      this._getGoodsList()
    },
    loadMore() {
      this.busy = true
      this.page++
      setTimeout(() => {
        this._getGoodsList(true)
      }, 10)
    },
    showFilterPop() {
      this.filterBy = true
      this.overlayFlag = true
    },
    clockPop() {
      this.filterBy = false
      this.overlayFlag = false
    },
    setPriceFilter(_index) {
      this.currentPrice = _index
      console.log(this.currentPrice)
      this.filterBy = false
      this.overlayFlag = false
      this.page = 1
      this._getGoodsList()
    },
    addCart(productId) {
      axios.post('/api/goods/addCart', {
        productId
      }).then(res => {
        if (res.data.status === '0') {
          this.mdShowCart = true
          this.$store.dispatch('cart/updateCart', 1)
        } else {
          this.err_msg = res.data.msg
          this.mdShow = true
        }
      })
    },
    closeModal() {
      this.mdShow = false
      this.mdShowCart = false
    }
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread,
    Modal
  }
}
</script>

<style scope>
</style>
